<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/admin/lib/html5shiv.js"></script>
    <script type="text/javascript" src="/admin/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui/css/H-ui.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="/admin/static/h-ui.admin/css/style.css"/>
    <!--[if IE 6]>
    <script type="text/javascript" src="/admin/lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->

</head>

<body>
<article class="page-container">
    <form class="form form-horizontal" id="form" autocomplete="off">
        <div class="row cl">
            <label class="form-label col-sm-3"><span class="c-red">*</span>编码：</label>
            <div class="formControls col-sm-9">
                <input type="text" class="input-text required number" value="" placeholder="" name="code"
                       autofocus="autofocus">
                <input type="text" hidden value="" placeholder="" name="id"
                       autofocus="autofocus">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-sm-3"><span class="c-red">*</span>名称：</label>
            <div class="formControls col-sm-9">
                <input type="text" class="input-text required" value="" placeholder="" name="name"
                       autofocus="autofocus">
            </div>
        </div>
        @csrf
        <div class="row cl pt-20">
            <div class="col-sm-9 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                <a class="btn btn-default radius" onclick="reset()">重置</a>
                <input class="btn btn-danger radius ml-15" type="button" value="&nbsp;&nbsp;关闭&nbsp;&nbsp;"
                       onclick="layer_close();">
            </div>
        </div>
    </form>
    <div class="mt-20">
        分类列表：
        <table class="table table-border table-bordered table-hover table-bg table-responsive mt-5">
            <thead>
            <tr class="text-c">
                <th>编码</th>
                <th>名称</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tb-body">
            @foreach($data as $item)
                <tr class="text-c" onclick="edit(this,{{$item->id}})" id="{{$item->id}}">
                    <td class="code">{{$item->code}}</td>
                    <td class="name">{{$item->name}}</td>
                    <td>
                        <a onclick="del({{$item->id}},this)" class="btn btn-danger radius">删除</a>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
</article>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/admin/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/admin/lib/layer/3.1.1/layer.js"></script>
<script type="text/javascript" src="/admin/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="/admin/static/h-ui.admin/js/H-ui.admin.js"></script>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript">
    $(function () {
        var index2;
        $("#form").validate({
            // onkeyup:false,
            // focusCleanup:false,
            success: "valid",
            submitHandler: function (form) {
                $(form).ajaxSubmit({
                    type: 'post',
                    url: "",//自己提交给自己可以不写url
                    beforeSend: function () {
                        let id = $('input[name=id]').val(), code1 = $.trim($('input[name=code]').val()),
                            code2 = $.trim($('#' + id).children('.code').text());
                        if (id !== '' && code1 !== code2) {
                            layer.msg('编码不可编辑！');
                            return false;
                        }
                        //0.4透明度 白色遮罩
                        index2 = layer.load(2, {shade: [0.3, '#fff']});
                    },
                    complete: function () {
                        layer.close(index2);
                    },
                    success: function (data) {
                        let icon = data.code === 0 ? 0 : 1;
                        layer.msg(data.msg, {icon: icon, time: 2000});
                        //判断添加结果
                        if (data.code != 0) {
                            let id = $('input[name=id]').val();
                            // 编辑
                            if (id !== '') {
                                $('#' + id).children('.name').text($('input[name=name]').val());
                                return false;
                            }
                            // 添加
                            id = data.code;
                            $('#tb-body').append('<tr class="text-c"  onclick="edit(this,' + id + ')">\n' +
                                '                    <td class="code">' + $('input[name=code]').val() + '</td>\n' +
                                '                    <td class="name">' + $('input[name=name]').val() + '</td>\n' +
                                '                    <td>\n' +
                                '                        <a onclick="del(' + id + ',this)" class="btn btn-danger radius">删除</a>\n' +
                                '                    </td>\n' +
                                '                </tr>');
                        }
                    },
                    error: function (data) {
                        ajax_error(data);
                    }
                });
            }
        });
    });

    function del(id, e) {
        $.ajax({
            type: 'GET',
            url: 'del?id=' + id,
            success: function (data) {
                let icon = data.code === 0 ? 0 : 1;
                layer.msg(data.msg, {icon: icon, time: data.data.time});
                if (icon === 1) {
                    $(e).parents('tr').remove();
                }
            },
            error: function (data) {
                ajax_error(data);
            },
            beforeSend: function () {
                //0.4透明度 白色遮罩
                index2 = layer.load(2, {shade: [0.05, '#000']});
            },
            complete: function () {
                layer.close(index2);
            },
        });

    }

    function edit(e, id) {
        let code = $(e).children('.code').text(), name = $(e).children('.name').text();
        $('input[name=code]').val(code);
        $('input[name=name]').val(name);
        $('input[name=id]').val(id);
    }

    function reset() {
        $('input[type=text]', '#form').val('');
    }
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>

</html>
